import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';

export default class Clustering extends Component {    
    initChart = () => {
        var chartDom = document.getElementById('ClusteringChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.clustering);
        fetch('./example/example-scatter.xlsx')
        .then(res=>res.text())
        .then(data=>{
            const rows = data.split('\n');
            const dataArray = [];
            const TitleList = [];
            rows.forEach(row => {
                if(row.split('\t')=='')
                {
                    return;
                }
                dataArray.push(row.split('\t'));
            }
            );
            dataArray.shift();
            

    const datalist = [
        ['5', '19'],
        ['1', '30'],
        ['8', '10'],
        ['9', '25'],
        ];
        console.log(datalist)
        console.log(dataArray);
        var CLUSTER_COUNT = 2;
        var DIENSIION_CLUSTER_INDEX = 2;
        var COLOR_ALL = [
        '#37A2DA',
        '#e06343',
        '#37a354',
        '#b55dba',
        '#b5bd48',
        '#8378EA',
        '#96BFFF'
        ];
        var pieces = [];
        for (var i = 0; i < CLUSTER_COUNT; i++) {
        pieces.push({
            value: i,
            label: 'cluster ' + i,
            color: COLOR_ALL[i]
        });
        }
        var option = {
        dataset: [
            {
            source: datalist
            },
            {
            transform: {
                type: 'ecStat:clustering',
                // print: true,
                config: {
                clusterCount: CLUSTER_COUNT,
                outputType: 'single',
                outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
                }
            }
            }
        ],
        tooltip: {
            position: 'top'
        },
        visualMap: {
            type: 'piecewise',
            top: 'middle',
            min: 0,
            max: CLUSTER_COUNT,
            left: 10,
            splitNumber: CLUSTER_COUNT,
            dimension: DIENSIION_CLUSTER_INDEX,
            pieces: pieces
        },
        grid: {
            left: 120
        },
        xAxis: {},
        yAxis: {},
        series: {
            type: 'scatter',
            encode: { tooltip: [0, 1] },
            symbolSize: 15,
            itemStyle: {
            borderColor: '#555'
            },
            datasetIndex: 1
        }
        };
        this.myChart.setOption(option);
    
    })
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
        return (
            <div className='w100 h100' id='ClusteringChart'></div>
        )
    }
}
